<template>
	<view>
		<view v-if="!showAddress">
			<Header title="领取详情" background="#fff" color="#333" :back="true"></Header>
		
			<!-- 确认领取弹框 -->
			<view class="receive-modal show">
				<view class="cu-dialog">
					<view class="dialog-content">
						<view class="address" v-if="buyInfo.goodsCategoryId == 2">
							<view class="title">确认收货地址</view>
							<view class="desc acea-row" @click.stop="openAddress">
								<view class="detail">
									<template v-if="addressInfo.addressId != ''">
										<view>{{ addressInfo.consignee }}&nbsp;&nbsp;{{addressInfo.phone}}</view>
										<view style="margin-top: 30rpx;">{{addressInfo.address}}</view>
									</template>
									<template v-else>请选择收货地址</template>
								</view>
								<view class="more">
									<image src="../../static/arrow-right-bold.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
								</view>
							</view>
						</view>
						<view class="address user-extra-info" v-if="buyInfo.goodsCategoryId == 1 || (buyInfo.goodsCategoryId == 2 && extraFieldList.length > 0)">
							<view class="title">用户信息</view>
							<view class="form">
								<template v-if="buyInfo.goodsCategoryId != 2">
									<view class='item acea-row row-between-wrapper'>
										<view class='name'>姓名</view>
										<input type='text' placeholder='请输入姓名' name='consignee' :value="userExtraInfo.consignee" placeholder-class='placeholder'></input>
									</view>
									<view class='item acea-row row-between-wrapper'>
										<view class='name'>手机号码</view>
										<input type='text' placeholder='请输入手机号码' name='phone' :value="userExtraInfo.phone" placeholder-class='placeholder'></input>
									</view>
								</template>
								<view class='item acea-row row-between-wrapper' v-for="(item, index) in extraFieldList" :key="index">
									<view class='name'>{{item.modelName}}</view>
									<input type='text' :placeholder="`请输入${item.modelName}`" :name="item.modelKey" v-model="item.value" placeholder-class='placeholder'></input>
								</view>
							</view>
						</view>
						<view class="goods-detail">
							<view class="acea-row">
								<view class="image">
									<image :src="buyInfo.thumb" mode=""></image>
								</view>
								<view class="info">
									<text>{{ buyInfo.goodsName }}</text>
									<view class="money acea-row">
										<view class="left acea-row">
											<image src="../../static/jf.jpg" mode="" style="width: 40rpx;height: 40rpx;"></image>
											<text class='num'>{{buyInfo.credit}}</text>
										</view>
										<text>x 1</text>
									</view>
								</view>
							</view>
							<button class="buy" @click.stop="buy(buyInfo)">确认领取</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 显示收货地址 -->
		<Address @back="{
			showAddress = false
			showReceiveModal = true
		}" @selectAdr="record => {
			showAddress = false
			showReceiveModal = true
			addressInfo = record
		}" v-else />
	</view>
</template>

<script>
	import { createOrder, createPreviewOrder } from '@/api/order.js'
	import { getUserProfile } from '@/utils/getUserProfile.js'
	import { getUserInfo } from '@/api/user.js'
	import Header from '@/pages/components/header.vue'
	import Address from '../../components/address/address.vue'
	export default {
		components: {
			Header,
			Address
		},
		data() {
			return {
				dotStyle: true,
				showReceiveModal: false, // 确认领取弹框
				buyInfo: {}, // 领取商品信息
				addressInfo: {}, // 收货地址
				showAddress: false, // 显示地址
				userInfo: {}, // 用户信息
				userExtraInfo: {}, // 用户额外信息
				extraFieldList: [] // 用户额外信息字段
			}
		},
		onLoad(option) {
			let token = uni.getStorageSync("token");
			if (!token) {
				this.getUserProfile(option.id);
			} else {
				this.getUserInfo()
				this.createPreviewOrder(option.id)
			}
		},
		onReady() {
			
		},
		mounted() {
			
		},
		methods: {
			// 领取
			receive(record) {
				let token = uni.getStorageSync("token");
				if (!token) {
					this.getUserProfile(record.goodsId);
				} else {
					this.getUserInfo()
					this.createPreviewOrder(record.goodsId)
				}
			},
			/**获取用户信息*/
			async getUserInfo() {
				let token = uni.getStorageSync("token");
				const {
					data
				} = await getUserInfo(token);
				console.log('u', data);
				this.userInfo = data;
				this.userExtraInfo.phone = data.phone
				this.userExtraInfo.consignee = data.realName
			},
			/**授权登录*/
			async getUserProfile(goodsId) {
				let data = await getUserProfile();
				if (data.code != 200) {
					uni.showToast({
						title: '登录失败！',
						duration: 1000,
						icon: 'none',
					});
				} else {
					this.getUserInfo()
					this.createPreviewOrder(goodsId)
				}
			},
			// 创建订单预览
			createPreviewOrder(goodsId){
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.buyInfo = {}
				this.addressInfo = {}
				createPreviewOrder({goodsId}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.showReceiveModal = true
						this.buyInfo = res.data.goods
						res.data.goods.models.forEach(item => {
							item.value = ''
						})
						this.extraFieldList = res.data.goods.models
						this.addressInfo = res.data.consign
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			// 选择地址
			openAddress() {
				this.showAddress = true
				this.showReceiveModal = false
			},
			// 返回
			back() {
				this.showAddress = false
			},
			// 确认领取
			async buy(info) {
				// 用户信息额外字段
				var extraFieldList = {}
				this.extraFieldList.forEach(item => {
					extraFieldList[item.modelKey] = item.value
				})
				
				
				const query = {
					addressId: this.addressInfo.addressId,
					goodsId: info.goodsId,
					consign: info.goodsCategoryId == 2 ? {...extraFieldList} : {...this.userExtraInfo, ...extraFieldList}
				}
				
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				createOrder(query).then(res=> {
					uni.hideLoading();
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none',
						});
						setTimeout(()=>{
							uni.switchTab({
								url: './index'
							})
						}, 1000)
					} else {						
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none',
						});
					}
				})
			}
		},
		/**
		   * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
@import './index.less';
.receive-modal{
	margin-top: 30rpx;
}
.user-extra-info{
	padding: 0 !important;
}
.address .title{text-align: center;}
.user-extra-info .form{margin: 30rpx 0;text-align: left;}
.user-extra-info .form .item{padding:0 30rpx;height:90rpx;border-top:1rpx solid #eee;}
.user-extra-info .form .item .name{width:195rpx;font-size:30rpx;color:#333;}
.user-extra-info .form .item input{width:475rpx;font-size:30rpx;}
.user-extra-info .form .item .placeholder{color:#ccc;}
.user-extra-info .form .item picker{width:475rpx;}
.user-extra-info .form .item picker .picker{width:410rpx;font-size:30rpx;}
.user-extra-info .form .item picker .iconfont{font-size:43rpx;}
</style>
